<template>
  <div class="m-2 mr-0 overflow-hidden bg-white">
    <BasicTree title="设备类型" treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"  :height="2000" :clickRowToExpand="false"
      :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getDeviceTree } from '@/api/collection/device/index';
import { BasicTree, TreeItem } from '@/components/Tree';

defineOptions({ name: 'DeptTree' });
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);

async function fetch() {
  const res = await getDeviceTree({})
  res.length && handleSelect([res[0].deviceId])
  const formateRes = addCopyName(res)
  treeData.value = (formateRes) as unknown as TreeItem[];
}

function addCopyName(arr) {
  return arr.map(item => {
    if (item.children && item.children.length) {
      addCopyName(item.children)
    }
    item.nameCopy = item.name
    return item
  })
}

function handleSelect(keys) {
  emit('select', keys[0]);
}

onMounted(() => {
  fetch();
});
</script>